<template>
  <div class="role-detail">
    <q-dialog v-model="show" persistent>
      <q-card v-drag class="card">
        <!-- 标题 -->
        <q-card-section class="dialog-title bg-primary">
          <div class="text-center text-white">
            <template v-if="forCreate">添加角色</template>
            <template v-if="forEdit">编辑角色</template>
          </div>
        </q-card-section>

        <!-- 正文 -->
        <q-form @submit.prevent="_submit" class="q-gutter-md dialog-content">
          <q-card-section class="padding-r-20 padding-l-20 padding-t-20">
            <!-- 名称 -->
            <yz-input v-model="role.name"
                      :rules="[0]"
                      :maxlength="20"
                      title="名称"/>
            <!-- 备注 -->
            <yz-input
              v-model.trim="role.remark"
              inputType="textarea"
              :maxlength="100"
              title="备注"
            />

            <!-- 底部按钮 -->
            <q-separator style="margin: 0 -20px; width: calc(100% + 40px)" />
            <div class="dialog-footer text-center margin-t-10">
              <q-btn class="q-mr-md" outline color="primary" @click="$emit('close')">
                <span>取消</span>
              </q-btn>
              <q-btn
                label="确认"
                color="primary"
                unelevated
                type="submit"
                :loading="isSubmitting"
              />
            </div>
          </q-card-section>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import roleDefineApi from 'src/boot/system/role-define'

export default {
  name: 'role-detail',
  props: {

    /**
     * 角色详情对象
     */
    role: {
      type: Object
    },

    /**
     * 该 dialog 用于编辑
     * {@link forCreate for-create}、{@link forEdit for-code-edit}
     * 二者必须有且仅有一项为 true
     * default: false
     */
    forEdit: {
      type: Boolean,
      default: false
    },

    /**
     * 该 dialog 用于创建
     * {@link forCreate for-create}、{@link forEdit for-code-edit}
     * 二者必须有且仅有一项为 true
     * default: false
     */
    forCreate: {
      type: Boolean,
      default: false
    },

    /**
     * 显示 dialog
     * default: false
     * required
     */
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      // form 正在提交
      isSubmitting: false
    }
  },
  methods: {

    /**
     * 检查 props 中的值是否合法
     * 出现非法的 props 时抛出异常
     */
    _checkProps: function () {
      // forEdit、forCreate 均为 false 或多于一项为 true
      let trueCount = [this.forEdit, this.forCreate].filter(o => o).length
      if (trueCount !== 1) {
        throw new Error('for-code-edit、for-create 二者必须有且只有一项为 true')
      }
    },

    /**
     * 提交表单
     */
    _submit: function () {
      let promise

      if (this.forCreate) {
        promise = roleDefineApi.createRole(this.role.name, this.role.remark).then(() => {
          this.$message.success('新增成功')
        })
      }

      if (this.forEdit) {
        promise = roleDefineApi.editRole(this.role.id, this.role).then(() => {
          this.$message.success('编辑成功')
        })
      }

      promise.then(() => {
        this.$emit('submitted')
      })
    }
  },
  created () {
    // 检查 props 的合法性
    // 任一非法则 throw，中断组件加载
    this._checkProps()
  }
}
</script>

<style scoped lang="stylus">
  .card {
    min-width 400px
  }
</style>
